<template>
    <div class="reg-continal" :style="{height: orderHight+'px'}">
        <p class="back mintui mintui-back" @click="goBack">返回</p>
        <div class="mui-content">
            <h3>账号注册</h3>
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>账号：</label>
					<input id='account' type="text" class="mui-input-clear mui-input" v-model="mobile" placeholder="请输入您的手机号 / 邮箱">
				</div>
				<div class="mui-input-row">
					<label>密码：</label>
					<input id='password' type="password" class="mui-input-clear mui-input" v-model="pwd" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label>确认密码：</label>
					<input id='password' type="password" class="mui-input-clear mui-input" v-model="sPwd" placeholder="请输入密码">
				</div>
				<div class="mui-input-row code-box">
					<label>验证码：</label>
					<input id='password' type="password" class="mui-input-clear mui-input" v-model="sPwd" placeholder="请输入验证码">
                    <button type="button" class="my-button" @click="getCode">获取验证码</button>
                </div>
			</form>
			<div class="mui-content-padded">
				<button id='login' type="button" class="mui-btn mui-btn-block mui-btn-primary" @click="reg">注册</button>
			</div>
		</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                orderHight: 0,
                mobile: '', // 手机号
                pwd: '',    // 密码
                sPwd: '',   // 再次确认密码
                code: ''    // 验证码
            }
        },
        created() {
            this.orderHight = (document.documentElement.clientHeight || document.body.clientHeight);
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            /**
             * 获取短信/邮箱验证码
             */
            getCode() {
                if(this.mobile&&this.mobile != '') {
                    if(/^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/.test(this.mobile)) { // 邮箱注册
                        this.$http.get("verification/mail/get?mobile="+this.mobile).then( (res) => {
                            console.log(res)
                        })
                    }else if(/^1[3456789]\d{9}$/.test(this.mobile)) {   // 手机号注册
                        this.$http.get("verification/sms/get?mobile="+this.mobile).then( (res) => {
                            console.log(res)
                        })
                    }else {
                        this.$toast('请正确输入您的邮箱或手机号') 
                    }
                }else{
                    this.$toast('请输入您的账号') 
                }
            },
            reg() {
                console.log('ok')
            }
        },
    }
</script>

<style lang="scss" scoped>
.reg-continal{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: -webkit-linear-gradient(#26a2ff,#e7a1eb); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(#26a2ff,#e7a1eb); /* Opera 11.1-12.0 */ 
    background: -moz-linear-gradient(#26a2ff,#e7a1eb); /* Firefox 3.6-15 */
    background:liner-gradient(#26a2ff,#e7a1eb);
    .mui-content{
        width: 85%;
        margin: 0 auto;
        border-radius: 10px;
        background-color:rgba(255,255,255,.3);
        h3{
            text-align: center;
            padding: 15px 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }
        .mui-input-group{
            background-color: transparent;
            .mui-input-row{
                width: 85%;
                margin: 0 auto;
                border-bottom: 1px solid #fff;
                label{
                    font-size: 14px;
                    color: #fff;
                    width: 30%;
                    line-height: 21px;
                    padding: 10px 0;
                    text-align-last: justify;
                    text-align: justify;
                }
                input{
                    width: 68%;
                    font-size: 14px;
                    color: #fff;
                }
            }
            .code-box{
                position: relative;
                .my-button{
                    position: absolute;
                    right: 0;
                    top: 5px;
                    width: 70px;
                    height: 30px;
                    font-size: 12px;
                    padding: 0;
                    border: 0;
                }
            }
        }
        .mui-btn-block{
            font-size: 16px;
            padding: 8px 0;
            width: 90%;
            margin: 20px auto;
            background-color: #26a2ff;
            border: none;
        }
        
    }
    .mui-input-group:before,.mui-input-group:after,.mui-input-group .mui-input-row:after{
        background-color: transparent;
    }
    .back{
        font-size: 14px;
        color: #fff;
        position: absolute;
        top: 20px;
        left: 5%;
    }
}

</style>